<template>
  <span class="plus-table-title-bar__toolbar__search-area-control">
    <el-tooltip ref="TooltipRef" placement="top" :content="title">
      <el-icon ref="TriggerRef" class="plus-table-title-bar__toolbar__icon" :size="18">
        <Hide v-if="visible" @click="changeVisible(false)" />
        <View v-else @click="changeVisible(true)" />
      </el-icon>
    </el-tooltip>
  </span>
</template>
<script setup>
import { Hide, View } from "@element-plus/icons-vue";

const TriggerRef = ref()
const TooltipRef = ref()

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  }
})

const emit = defineEmits(['update:modelValue'])

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const title = computed(() => {
  return visible.value ? '隐藏搜索区域' : '显示搜索区域'
})

function changeVisible(v) {
  visible.value = v
  TooltipRef.value?.hide()
}
</script>
